/* 
  学习目标：Channel封装进阶-支持默认宽度、兼容Select原有Props
*/

import React, { useEffect, useState } from 'react';
import { Select } from 'antd';
import { getChannelsAPI } from 'api/channel';
// 1. 自定义组件要接收FormItem传来的value和onChange
export default function Channel({ style, ...restProps }) {
  const [channels, setChannels] = useState([]);
  const loadChannels = async () => {
    const res = await getChannelsAPI();
    setChannels(res.data.channels);
  };

  useEffect(() => {
    loadChannels();
  }, []);

  return (
    // 2. 将props直接解构传给Select
    <Select style={{ width: 200, ...style }} allowClear {...restProps}>
      {channels.map((item) => {
        return (
          <Select.Option key={item.id} value={item.id}>
            {item.name}
          </Select.Option>
        );
      })}
    </Select>
  );
}
